<template>
  <div class="wrapper">
    <h3>阶段点进度</h3>
    <el-row>
			<el-steps :active="1" simple>
				<el-step title="立项/变更" icon="el-icon-edit"></el-step>
				<el-step title="计划确定" icon="el-icon-upload"></el-step>
				<el-step title="需求分析" icon="el-icon-picture"></el-step>
				<el-step title="立项/变更" icon="el-icon-edit"></el-step>
				<el-step title="计划确定" icon="el-icon-upload"></el-step>
				<div></div>
				<el-step title="需求分析" icon="el-icon-picture"></el-step>
				<el-step title="立项/变更" icon="el-icon-edit"></el-step>
				<el-step title="计划确定" icon="el-icon-upload"></el-step>
				<el-step title="需求分析" icon="el-icon-picture"></el-step>
			</el-steps>
      <el-col :span="6" class="el-margin">
				<!-- <h1>立项/变更</h1>
				<el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
				<h1>立项/变更</h1>
      	<div class="step-content"></div>
			</el-col>
			<el-col :span="6" class="el-margin">
				<h1>计划确定</h1>
				<div class="step-content"></div>
      	<!-- <el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
			</el-col>
      <el-col :span="6" class="el-margin">
				<h1>需求分析</h1>
				<div class="step-content"></div>
      	<!-- <el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
			</el-col>
			<el-col :span="6" class="el-margin">
				<h1>软件设计</h1>
				<div class="step-content"></div>
      	<!-- <el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
			</el-col>
      
			<el-col :span="6" class="el-margin">
				<h1>编码实现</h1>
				<div class="step-content"></div>
      	<!-- <el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
			</el-col>
			<el-col :span="6" class="el-margin">
				<h1>FC</h1>
				<div class="step-content"></div>
      	<!-- <el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
			</el-col>
			<el-col :span="6" class="el-margin">
				<h1>ST实施</h1>
				<div class="step-content"></div>
      	<!-- <el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
			</el-col>
			<el-col :span="6" class="el-margin">
				<h1>交付</h1>
				<div class="step-content"></div>
      	<!-- <el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
			</el-col>
      
      <el-col :span="6" class="el-margin">
				<h1>结项</h1>
				<div class="step-content"></div>
      	<!-- <el-progress :text-inside="true" :stroke-width="30" :percentage="cur_step"></el-progress> -->
			</el-col>                
    </el-row>
  </div>
</template>

<script>
var valid = true;
export default {
	name: 'progress_steps',
	props: {
		cur_step: Number
	},
	data() {
		return {
			valid: true
		};
	},
	mounted() {
		console.log(this.cur_step)
	// 	var self = this;
	// 	$('#progress').steps({
	// 		onStepChanging: function(event, currentIndex, priorIndex) {
	// 			return self.valid;
	// 		}
	// 	});
		// for (var i = 0; i < this.cur_step; i++) {
		// 	$('#progress').steps('next');
		// }
	// 	self.valid = false;
	// 	if (self.cur_step > 0) {
	// 		$('#progress').steps('next');
	// 	} else {
	// 		$('.first').addClass('disabled');
	// 		$('.first').removeClass('current');
	// 		$('.first').removeClass('first');
	// 	}
	// 	$('#progress .content').hide();
	// 	$('#progress .actions').hide();
	 }
};
</script>

<style scoped>
.wrapper{
	padding: 40px 0;
}
h3{
	margin-top: 5px;
  font-weight: 600;
	font-size: 16px;
	color: rgb(103, 106, 108);
}

h1{
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	margin-top: 5px;
	background: #eee;
	color: #aaa;
	cursor: default;
	font-size: 14px;
	/* color: #aaa; */
	padding: 8px;
}


</style>